<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="版本列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-input title="版本号" :up-table="true" name="verNo"></form-input>
                        <form-date-time title="发布时间" :up-table="true" name="isuTime"></form-date-time>

                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container title="编辑" v-el:modal v-ref:modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsSet"></table-modal>
                </div>

                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>

        </modal-container>
      <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right:10px;
    }
    .form-inline .form-group+.form-group {
        margin-left: 20px;
    }
</style>
<script>
import {dateTime, createDataTable} from 'ui/collections/general.js'
var serialize = require('form-serialize');

var dataTable;
var columnsSet;
export default {
    data:() => ({
        item: {},
        columnsSet: []
    }),
    methods: {
        //还原弹出框位置
        resetBindDrag(){
            this.$refs.modal._resetBindDrag();
        },
        //查询按钮
        search: function () {
            dataTable.ajax.reload();
        },
        //重置按钮
	    reset: function () {
            $(".form-inline")[0].reset();
            dataTable.ajax.reload();
	    }
    },
    created(){
        columnsSet = [
            {
                title:"编号",
                data:"verId",
                readonly:true,
                edit:true
            },
            {
                title: "版本号",
                data: "verNo",
                edit: true,
            },
            {
                title: "应用类型",
                data: "type",
                options:[
                    {key: "安卓", value: "1"},
                    {key: "IOS", value: "2"},
                ],
                render: value => ["","安卓","IOS"][value]
            },
            {
                title: "是否强制更新",
                data:"isForce",
                options:[
                    {key: "是", value: "0"},
                    {key: "否", value: "1"}
                ],
                render: value => ["是", "否"][value]
            },
            {
                title: "发布时间",
                data:"isuTime"
            },
            {
                title: "最后修改时间",
                data:"lastTime"
            },
            {
                title: "相关操作",
                className: "operate",
                width:"160px",
                render: function(value, type, row) {
                    return `
                        <button type="button" class="btn btn-primary btn-sm edit">编辑</button>
                        <button type="button" class="btn btn-danger btn-sm delete">删除</button>
                    `
                }
            }
        ]
    },
    ready:async function () {
        dateTime({format:"yyyy-mm-dd",startDate:"", minView:"2"})
        this.$set("columnsSet",columnsSet)
        var self = this;
        dataTable = createDataTable({
            config:{
                table:this.$els.table,
                columns:this.columnsSet
            },
            send:{
                url:"/api/v1" + projectName_Url + "/app/soft/queryList.html",
                searchData:{ verNo:"verNo",isuTime:"isuTime"}
            },
            receive:{
                list:"softList",
                total: "total"
            }
        })

        $(self.$el).on("click",".edit",function() {
            var Row = $(this).closest('tr').get(0);
            const dataArray = _.cloneDeep(dataTable.row(Row).data());
            self.item = dataArray;
            //编辑框验证、保存、提交
            $(self.$els.mform).validate(self.item.valdate = {
                async submitHandler() {
                    var form = self.$els.mform;
                    var _data = serialize(form, { hash: true, disabled:true, empty:true });
                    _data.verId = self.item.verId;
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/app/soft/upd.html",
        				data: _data
                    });
                    Midway.alert({title:"操作成功",content:"编辑操作成功"})
        			dataTable.ajax.reload(null,false);
                    $(self.$els.modal).modal('hide');
                    self.resetBindDrag()
                },
                rules:{
                    verId:{
                        required:true
                    },
                    verNo:{
                        required:true,
                        version:true
                    },
                    isForce:{
                        required:true
                    },
                    type:{
                        required: true
                    }

                },
                messages: {

                }
            });
            $(self.$els.modal).modal('show');
        });

        $(self.$el).on("click",".delete",async function() {
            var Row = $(this).closest('tr').get(0);
            var name = dataTable.row(Row).data().verNo;
			var id = dataTable.row(Row).data().verId;

            await Midway.confirm({
                title: "删除项目",
                content: "是否要删除项目名称:" + name + "?"
            })
			var result = await self.$post({
				url: "/api/v1" + projectName_Url + "/app/soft/del.html",
				data:{
    				verId: id
    			}
			});
            Midway.alert({title:"删除成功",content:"删除成功"})
			dataTable.ajax.reload();
        });
    },
    beforeDestroy(){
        $(this.$el).off("click")
    }
}
</script>
